<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>企业Excel协作平台 - 离线版</title>
    
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            font-family: 'Microsoft YaHei', Arial, sans-serif;
        }
        .header {
            background: #2c3e50;
            color: white;
            padding: 10px 20px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
        }
        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        .notice {
            background: #f39c12;
            color: white;
            padding: 10px;
            text-align: center;
            font-size: 14px;
        }
        #luckysheet {
            position: absolute;
            width: 100%;
            height: calc(100% - 100px);
            top: 100px;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="header">
        🏢 企业Excel协作平台 - 超轻量版
    </div>
    
    <div class="notice">
        📡 正在从CDN加载资源，首次使用需要网络连接...
    </div>
    
    <div class="loading" id="loading">
        <h3>⏳ 加载中...</h3>
        <p>正在初始化Excel组件</p>
    </div>
    
    <div id="luckysheet" style="display:none;"></div>

    <!-- 从CDN加载Luckysheet -->
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css' />
    
    <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>
    
    <script>
        // 显示加载进度
        setTimeout(function() {
            document.getElementById('loading').innerHTML = '<h3>🔧 初始化Excel引擎...</h3>';
        }, 1000);
        
        $(function () {
            // 隐藏加载界面
            document.getElementById('loading').style.display = 'none';
            document.getElementById('luckysheet').style.display = 'block';
            document.querySelector('.notice').style.display = 'none';
            
            var options = {
                container: 'luckysheet',
                title: '企业协作表格',
                lang: 'zh',
                
                allowCopy: true,
                allowEdit: true,
                allowUpdate: true,
                
                showtoolbar: true,
                showinfobar: true,
                showsheetbar: true,
                showstatisticBar: true,
                
                updateMode: 'fast',
                
                data: [{
                    "name": "员工信息表",
                    "color": "",
                    "index": "0",
                    "status": "1",
                    "order": "0",
                    "data": [
                        ["部门", "姓名", "职位", "工资", "入职日期", "备注"],
                        ["技术部", "张三", "前端工程师", "15000", "2023-01-15", "Vue.js专家"],
                        ["技术部", "李四", "后端工程师", "16000", "2023-02-01", "Java开发"],
                        ["市场部", "王五", "市场专员", "12000", "2023-03-10", "负责华南区域"],
                        ["财务部", "赵六", "财务助理", "10000", "2023-04-05", "负责报销审核"],
                        ["", "", "", "", "", ""],
                        ["", "", "", "=SUM(D2:D5)", "总计工资", ""]
                    ]
                }],
                
                cellEditAfter: function(range, value, sheetOrder) {
                    saveToLocal();
                }
            };
            
            luckysheet.create(options);
            loadFromLocal();
            
            // 添加提示信息
            setTimeout(function() {
                console.log('✅ Excel协作平台加载完成！');
                console.log('💡 提示: 按Ctrl+S保存数据到本地');
            }, 2000);
        });
        
        function saveToLocal() {
            try {
                var data = luckysheet.getAllSheets();
                localStorage.setItem('enterprise_excel_data', JSON.stringify(data));
                console.log('✅ 数据已保存到本地');
            } catch (e) {
                console.log('❌ 保存失败:', e);
            }
        }
        
        function loadFromLocal() {
            try {
                var savedData = localStorage.getItem('enterprise_excel_data');
                if (savedData) {
                    var data = JSON.parse(savedData);
                    luckysheet.setAllSheets(data);
                    console.log('✅ 从本地加载数据成功');
                }
            } catch (e) {
                console.log('❌ 加载失败:', e);
            }
        }
        
        // 快捷键保存
        document.addEventListener('keydown', function(e) {
            if (e.ctrlKey && e.key === 's') {
                e.preventDefault();
                saveToLocal();
                alert('💾 数据已保存到本地！');
            }
        });
        
        // 错误处理
        window.addEventListener('error', function(e) {
            document.getElementById('loading').innerHTML = 
                '<h3 style="color:red;">❌ 加载失败</h3>' +
                '<p>请检查网络连接或使用离线版本</p>';
        });
    </script>
</body>
</html>
